<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>duybRedux 计数器案例</title>
  </head>
  <body>
    <button id="plus">+</button>
    <button id="plus_async">+ async</button>
    <span id="count">0</span>
    <button id="minus">-</button>
    <script src="./duybRedux.js"></script>
    <script src="./middlewares/logger.js"></script>
    <script src="./middlewares/thunk.js"></script>
    <script>
      // 3.  存储默认状态
      var initialState = {
        count: 0,
      };

      // 2. 创建 reducer 函数
      function counterReducer(state = initialState, action) {
        console.log('action :', action);

        switch (action.type) {
          case 'increment':
            return { count: state.count + 1 };
          case 'decrement':
            return { count: state.count - 1 };
          default:
            return state;
        }

        return state;
      }

      // 8. enhancer
      function enhancer(createStore) {
        return function (reducer, preloadedState) {
          var store = createStore(reducer, preloadedState);
          // console.log('enhancer store :', store);

          var dispatch = store.dispatch;
          function _dispatch(action) {
            if (typeof action === 'function') {
              return action(dispatch);
            }
            dispatch(action);
          }

          return {
            ...store,
            dispatch: _dispatch,
          };
        };
      }

      // 11. counterReducer
      var rootReducer = combineReducers({
        counter: counterReducer,
      });

      // 1. 创建 store 对象
      // var store = createStore(reducer, initialState, enhancer);
      // 9. 中间件 上一个中间件的 next 指下一个中间件，最后一个中间件的 next 指 reducer
      var store = createStore(
        rootReducer,
        initialState,
        applyMiddleware(logger, thunk)
      );
      console.log('store :', store);

      // 4. 定义 action
      var increment = {
        type: 'increment',
      };
      var decrement = {
        type: 'decrement',
      };

      // 10. bindActionCreators
      var actions = bindActionCreators(
        {
          increment: _increment,
          decrement: _decrement,
        },
        store.dispatch
      );
      function _increment() {
        return { type: 'increment' };
      }
      function _decrement() {
        return { type: 'decrement' };
      }

      // 5. 点击事件
      document.getElementById('plus').addEventListener('click', () => {
        // 6. 触发 action
        // store.dispatch(increment);
        actions.increment();
      });

      document.getElementById('minus').addEventListener('click', () => {
        // store.dispatch(decrement);
        actions.decrement();
      });

      // enhancer
      document.getElementById('plus_async').addEventListener('click', () => {
        // 6. 触发 action
        store.dispatch((dispatch) => {
          setTimeout(() => {
            dispatch(increment);
          }, 1000);
        });
      });

      // 7. 订阅 store
      store.subscribe(() => {
        // 获取 store 对象中存储的状态
        var state = store.getState();
        console.log('store :', store);
        console.log('store.getState() :', state);
        document.getElementById('count').innerText = state.counter.count;
      });
    </script>
  </body>
</html>
